<template>
  <div class="preson">
    <h1>情况四：监视【ref,reactive】定义的【基本类型】数据</h1>
    <h2>姓名：{{person.name}}</h2>
    <h2>张三：{{person.age}}</h2>
    <h2>汽车：{{person.car.c1}}、{{person.car.c2}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeCarC1">修改车1</button>
    <button @click="changeCarC2">修改车2</button>
    <button @click="changeCar">修改车</button>
  </div>
</template>

<script setup lang="ts" name="Preson">
  import { ref,reactive,watch} from "vue";
  //数据 情况四：监视【ref或reactive】定义的【对象类型】数据中的某个属性,若不是对象类型,需写成函数形式,若是对象类型,可直接编写,但建议写成函数
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name+='~'
  }
  function changeAge(){
    person.age+=1
  }
  function changeCarC1(){
    person.car.c1 = '奥拓'
  }
  function changeCarC2(){
    person.car.c2 = '桑塔纳'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }
  // 监视 监视ref或reactive中的某个属性,若不为对象类型,需传一个getter函数
  watch(()=>person.name,(v1,v2)=>{
    console.log('name发生了变化',v1,v2)
  })
  // 监视 监视ref或reactive中的某个属性,若为对象类型,可直接编写,但推荐改为getter函数
  watch(()=>person.car,(v1,v2)=>{
    // 注 若对象类型并修改了整体,内部属性可以监视.但监视整体时,无法监视
    console.log('car',v1,v2)
  },{deep:true})
</script>

<style scoped>
.preson {
  background-color: skyblue;
  box-shadow: 0 0 10px 0;
  padding: 10px;
  border-radius: 10px;
}
</style>
